<template>
  <div>
    <div class="table-data" v-if="allDatas!=' '">
      <p class="order-detail-title">基础信息</p>
      <div class="user-info-item">
        <span>商品名称：</span>
        <span>{{allDatas.title}}</span>
      </div>
      <div class="user-info-item">
        <span>商品封面图：</span>
        <el-image class="img" :src="allDatas.cover"></el-image>
      </div>
      <div class="user-info-item">
        <span>商品轮播图：</span>
        <el-image class="img" v-for="(item,index) in allDatas.images" :key="index" :src="item.url"></el-image>
      </div>
      <!-- <div class="user-info-item">
        <span>购买须知：</span>
        <span>{{allDatas}}</span>
      </div> -->
      <!-- <div class="user-info-item">
        <span>商品详情：</span>
        <span>{{allDatas}}</span>
      </div> -->
      <div class="user-info-item">
        <span>商品类型：</span>
        <span v-if="allDatas.verify_type=='ship'">物流商品</span>
        <span v-else>核销商品</span>
      </div>
      <div class="user-info-item">
        <span>制码模式：</span>
        <span v-if="allDatas.ticket_type==1">自建商品</span>
        <span v-if="allDatas.ticket_type==2">倒码商品</span>
        <span v-if="allDatas.ticket_type==3">制码商品</span>
      </div>
      <div class="user-info-item">
        <span>售卖时间：</span>
        <span>{{allDatas.sale_on_time}} 至 {{allDatas.sale_off_time}}</span>
      </div>
      <div class="user-info-item">
        <span>是否可退：</span>
        <span v-if="allDatas.refund_able==0">不支持</span>
        <span v-else>支持</span>
      </div>
      <div class="user-info-item">
        <span>商品所属分类：</span>
        <span>{{allDatas.cate_txt.first}}-{{allDatas.cate_txt.second}}-{{allDatas.cate_txt.third}}</span>
      </div>
      <p class="order-detail-title">核销码信息</p>
      <div class="user-info-item">
        <span>一个商品生成的核销码数量（无关规格）：</span>
        <span>{{allDatas.create_ticket_num}}</span>
      </div>
      <div class="user-info-item">
        <span>核销保护期分钟：</span>
        <span>{{allDatas.verify_hour}}</span>
      </div>
      <div class="user-info-item">
        <span>核销码有效期：</span>
        <span>{{allDatas.verify_start_time}} 至 {{allDatas.verify_end_time}}</span>
      </div>
      <p class="order-detail-title">价格信息</p>
      <div  v-if="!detailShow">
        <div class="user-info-item" v-if="manage=='admin'">
          <span>每个核销码结算价：</span>
          <span>{{allDatas.vendor_settle_price}}</span>
        </div>
        <div class="user-info-item">
          <span>单商品渠道结算价：</span>
          <span>{{allDatas.channel_settle_price}}</span>
        </div>
        <div class="user-info-item">
          <span>原价：</span>
          <span>{{allDatas.original_price}}</span>
        </div>
        <div class="user-info-item">
          <span>建议售价（单个商品，非单个核销码）：</span>
          <span>{{allDatas.suggest_price}}</span>
        </div>
        <div class="user-info-item">
          <span>库存：</span>
          <span>{{allDatas.stock}}</span>
        </div>
        <div class="user-info-item">
          <span>重量（单位g）：</span>
          <span>{{allDatas.weight}}</span>
        </div>
      </div>
      <el-table :data="allDatas.spec_item_price" border style="width: 1000px; margin-left: 100px;" :height= "300" v-if="detailShow">
        <el-table-column v-if="manage!='shop'"  prop="zh_sku" label="唯一标识"  width="180"></el-table-column>
        <el-table-column  prop="key_name" label="规格"  width="180"></el-table-column>
        <el-table-column prop="original_price" label="原价" v-if="manage!='shop'"></el-table-column>
        <el-table-column prop="platform_price" label="渠道结算价" v-if="manage!='shop'"></el-table-column>
        <el-table-column prop="price" label="建议售价" v-if="manage!='shop'"></el-table-column>
        <el-table-column prop="sale_stock" label="已售"></el-table-column>
        <el-table-column prop="stock" label="剩余"></el-table-column>
      </el-table>
      
      <div class="sub">
        <el-button @click="handleBack()" type="primary" size="small">返回</el-button>
      </div>
    </div>
  
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import goodsApi from "@/api/goods";
import Clipboard from 'clipboard'
@Component({ components: {} })
export default class orderDetail extends Vue {
  // @Getter("user") getUser: any;
  detailShow:boolean = false
  @Provide() allDatas:any={
    order_info:{},
    shop_info:{},
    user_info:{}
  }
  @Provide() manage: any = '';//管理员
  created() {
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
    this.loadData();
  }
  handleBack(){
    this.$router.push({
      path:'/goodsList'
    })
  }
  loadData() {
   goodsApi.goodsDetail(this.$route.query.id)
    .then((res: any) => {
      this.allDatas=res.data.data
      if(this.allDatas.spec_item_price.length==0) {
        this.detailShow = false
      }else {
        this.detailShow = true
      }
    })
  }
}
</script>

<style lang="scss" scoped>

.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
  padding: 0 !important;
}
.table-data {
  table{
    td{
      p{
        border: 1px solid #EBEEF5;
        width: 100%;
      }
    }
  }
  .order-detail-title{
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
    margin-top: 10px;
    margin-left: 100px;
  }
  .user-info-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    line-height: 24px;
    font-size: 14px;
    span {
      display: inline-block;
    }
    span:first-of-type {
      width: 300px;
      text-align: right;
    }
    span:last-of-type {
      padding-left: 15px;
    }
    .img{
      width: 150px;
      height: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
.sub{
  text-align: center;
  margin: 50px 0;
}


.details {
    width: 1200px;
    height: 800px;
    background: #fff;
    margin-left: -600px;
    margin-top: -400px;
    padding: 10px 30px;
    .details-tilte {
      padding: 10px 0;
      font-size: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .details-box1 {
      height: 700px;
    }
    .but-box {
      text-align: center;
      margin-top: 10px;
    }
  }
</style>
